<template>

    <view class="container">

        <view class="mineInfo">
            <view class="banner">
                <image :src="iconUrl+'我的banner.png'"></image>
            </view>
            <view class="content">
                <view class="set" @click="toSet">
                    <image mode="heightFix" :src="iconUrl+'设置.png'"></image>
                    <text>设置</text>
                </view>
                <view class="authInfo">
                    <view view class="head">
                        <image mode="heightFix" :src="iconUrl+'头像.png'"></image>
                    </view>
                    <view class="phoneAuth">
                        <text>{{userInfo.userMobile}}</text>
                        <image mode="heightFix" :src="iconUrl+'未认证.png'" v-if="userInfo.certStatus !== '2'"></image>
                        <image mode="heightFix" :src="iconUrl+'已认证.png'" v-if="userInfo.certStatus === '2'"></image>
                    </view>
                </view>
                <view class="auth">

                </view>
            </view>
        </view>
        <view class="twoItemContainer">
            <view class="twoItem">
                <view class="itemOne">
                    <image :src="iconUrl+'签约信息背景.png'"></image>
                </view>
                <view class="itemTwo">
                    <image :src="iconUrl+'签约信息背景.png'"></image>
                </view>
            </view>
            <view class="resumeSign">
                <view class="resumeIcon" @click="toResume">
                    <view>
                        <image :src="iconUrl+'完善简历.png'"></image>
                    </view>
                    <view>
                        <text>查看合同</text>
                    </view>
                </view>
                <view class="signIcon" @click="auth">
                    <image :src="iconUrl+'签约信息.png'"></image>
                    <text>实名认证</text>
                </view>
            </view>
        </view>

        <view class="tabBar">
            <view>
                <u-tabs :list="list" :item-width="350" :is-scroll="false" :current="current" @change="change"></u-tabs>
            </view>
            <view class="tabBg" v-if="current===0">
                <view v-if="projectBMList.length===0">
                    <view>
                        <image :src="iconUrl+'暂无数据.png'"></image>
                    </view>
                    <view>
                        <text>暂无数据, 快去报名任务吧~</text>
                        <view class="blank"></view>
                    </view>
                </view>
                <view v-if="projectBMList.length>0" class="bm-data" @click="detail(item.id)"
                      v-for="item in projectBMList" :key="item.id">
                    <view class="info">
                        <view class="top">
                            <view class="title">
                                <div @click="detail">{{item.projectName}}</div>
                            </view>
                            <view class="price">
                                <text>{{item.positionSalary}}</text>
                                <text style="font-size:24rpx;color:black">/{{item.salaryUnit}}</text>
                            </view>
                        </view>
                        <view class="tag">

                            <u-tag :text="item.sex" v-if="item.sex !== ''" type="info" bg-color="#F5F5F5"
                                   border-color="#F5F5F5"
                                   mode="light" size="mini"/>
                            <u-tag :text="item.age" v-if="item.age !== ''" type="info" bg-color="#F5F5F5"
                                   border-color="#F5F5F5"
                                   mode="light" size="mini"/>
                            <u-tag :text="item.education" v-if="item.education !== ''" type="info" bg-color="#F5F5F5"
                                   border-color="#F5F5F5" mode="light" size="mini"/>
                        </view>
                        <view class="company">
                            <view style="margin-top:7rpx;">
                                <image mode="heightFix" :src="iconUrl+'工具箱.png'"></image>
                            </view>
                            <view>
                                <text style="font-size:26rpx;">{{item.corpName}}</text>
                            </view>
                        </view>
                    </view>
                </view>

            </view>
            <view class="tabBg" v-if="current===1">
                <view v-if="projectLYList.length===0">
                    <view>
                        <image :src="iconUrl+'暂无数据.png'"></image>
                    </view>
                    <view>
                        <text>暂无录用信息</text>
                        <view class="blank"></view>
                    </view>
                </view>
                <view v-if="projectLYList.length>0" class="bm-data" @click="detail(item.id)"
                      v-for="item in projectLYList" :key="item.id">
                    <view class="info">
                        <view class="top">
                            <view class="title">
                                <div @click="detail">{{item.projectName}}</div>
                            </view>
                            <view class="price">
                                <text>{{item.positionSalary}}</text>
                                <text style="font-size:24rpx;color:black">/{{item.salaryUnit}}</text>
                            </view>
                        </view>
                        <view class="tag">

                            <u-tag :text="item.sex" v-if="item.sex !== ''" type="info" bg-color="#F5F5F5"
                                   border-color="#F5F5F5"
                                   mode="light" size="mini"/>
                            <u-tag :text="item.age" v-if="item.age !== ''" type="info" bg-color="#F5F5F5"
                                   border-color="#F5F5F5"
                                   mode="light" size="mini"/>
                            <u-tag :text="item.education" v-if="item.education !== ''" type="info" bg-color="#F5F5F5"
                                   border-color="#F5F5F5" mode="light" size="mini"/>
                        </view>
                        <view class="company">
                            <view style="margin-top:7rpx;">
                                <image mode="heightFix" :src="iconUrl+'工具箱.png'"></image>
                            </view>
                            <view>
                                <text style="font-size:26rpx;">{{item.corpName}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="bottom"></view>
        <u-tabbar v-model="tabCurrent" :list="tarBarList" :mid-button="merType !== '1'"></u-tabbar>
    </view>

</template>

<script>
    import tabBar from '@/static/js/tabBar.js';

    export default {
        data() {
            return {
                iconUrl: this.iconUrl,
                sexOptions: [],
                educationOptions: [],
                list: [{
                    name: '已报名',
                }, {
                    name: '已录用',
                }],
                tarBarList: [],
                current: 0,
                tabCurrent: 0,
                merType: '1',
                userInfo: {},
                projectBMList: [],
                projectLYList: [],
                status: "",
                pageNumber: 1,
                pageSize: 10,
                isEnd: false
            }
        },
        //上拉分页展示
        onReachBottom() {
            this.pageNumber = this.pageNumber + 1;
            if (this.isEnd) {
                return;
            }
            this.getProjectList(this.current + 1 + '', true);
        },
        onPullDownRefresh() {
            this.restPage();
            //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
            setTimeout(function () {
                uni.stopPullDownRefresh();  //停止下拉刷新动画
            }, 500);
            this.getData();
        },
        onLoad() {
            this.$getDictList('sex', {
                success: (cts) => {
                    this.sexOptions = cts.data;
                }
            });
            this.$getDictList('education', {
                success: (cts) => {
                    this.educationOptions = cts.data;
                }
            });
            this.tarBarList = tabBar.getBarList(this.merType, this.iconUrl);
            this.getData();
        },
        onShow() {
            this.restPage();
            this.getData();
        },
        methods: {
            getData() {
                this.getProjectList('1', false);
                this.getProjectList('2', false);
            },
            restPage() {
                this.pageNumber = 1;
                this.status = '';
                this.isEnd = false;
                this.current = 0;
            },
            getProjectList(status, pageFlag) {

                //查询用户信息
                this.$sendRequest({
                    url: '/api/wx/getUserInfo',
                    method: 'POST',
                    success: (userCts) => {
                        this.userInfo = userCts.data;
                        //查询项目信息
                        this.$sendRequest({
                            url: '/api/wx/getProjectList',
                            method: 'POST',
                            data: {
                                phone: userCts.data.userMobile,
                                status: status,
                                pageNumber: this.pageNumber,
                                pageSize: this.pageSize
                            },
                            success: (cts) => {
                                let dataRecord = cts.data.records;
                                dataRecord.forEach(item => {
                                    item.sex = this.$selectDictLabel(this.sexOptions, item.sex)
                                    item.education = this.$selectDictLabel(this.educationOptions, item.education)
                                });
                                if (status === '1') {
                                    if (pageFlag) {
                                        this.projectBMList = this.projectBMList.concat(dataRecord);
                                    } else {
                                        this.projectBMList = dataRecord;
                                    }
                                }
                                if (status === '2') {
                                    if (pageFlag) {
                                        this.projectLYList = this.projectLYList.concat(dataRecord);
                                    } else {
                                        this.projectLYList = dataRecord;
                                    }
                                }
                            }
                        });
                    }
                });


            },
            detail(id) {
                uni.navigateTo({
                    url: '/pages/task/detail?id=' + id
                })
            },
            toSet() {
                uni.navigateTo({
                    url: '/pages/mine/set'
                });
            },
            change(index) {
                this.restPage();
                this.current = index;
                if (this.current === 0) {
                    this.getProjectList(1, false)
                }
                if (this.current === 1) {
                    this.getProjectList(2, false)
                }
            },
            auth() {
                //查询用户信息
                this.$sendRequest({
                    url: '/api/wx/userIsAuth',
                    method: 'POST',
                    success: (cts) => {
                        //未认证
                        if (cts.data.certStatus === '1') {
                            uni.navigateTo({
                                url: "/pages/mine/userAuth"
                            });
                        }
                        //认证成功
                        if (cts.data.certStatus === '2') {
                            uni.navigateTo({
                                url: "/pages/mine/authMessage?isAuth=1"
                            });
                        }
                        //处理中
                        if (cts.data.certStatus === '3') {
                            uni.showToast({
                                title: "审核中...",
                                type: "error",
                                icon: 'none'
                            });
                        }
                        //认证失败
                        if (cts.data.certStatus === '4') {
                            uni.navigateTo({
                                url: "/pages/mine/authMessage?isAuth=0"
                            });
                        }

                    }
                });
            },
            toResume() {
                uni.navigateTo({
                    url: '/pages/mine/resume'
                });
            }
        }
    }
</script>


<style lang="scss">
    .container {
        margin: 0rpx 20rpx;

        .banner image {
            width: 710rpx;
            height: 280rpx;
        }

        .mineInfo {
            position: relative;

            .content {
                position: absolute;
                top: 30rpx;
                width: 710rpx;
                height: 260rpx;

                .set {
                    display: flex;
                    justify-content: flex-end;
                    padding-right: 30rpx;

                    image {
                        width: 64rpx;
                        height: 30rpx;
                    }

                    text {
                        display: block;
                        font-size: 24rpx;
                        margin-left: 6rpx;
                        color: #FFFFFF;
                    }
                }

                .authInfo {
                    margin-top: 20rpx;
                    display: flex;

                    .head {
                        padding: 0 30rpx 0 30rpx;

                        image {
                            height: 100rpx;
                        }
                    }

                    .phoneAuth {
                        display: flex;
                        padding: 5rpx 0;
                        flex-direction: column;

                        text {
                            display: block;
                            font-size: 36rpx;
                            color: #FFFFFF;
                            margin-bottom: 10rpx;
                        }

                        image {
                            height: 40rpx;
                        }
                    }
                }
            }
        }

        .twoItem {
            margin-top: 20rpx;
            display: flex;

            .itemOne {
                margin-right: 19rpx;

                image {
                    width: 345rpx;
                    height: 160rpx;
                }
            }

            .itemTwo {
                image {
                    width: 345rpx;
                    height: 160rpx;
                }
            }
        }

        .twoItemContainer {
            position: relative;
        }

        .resumeSign {
            position: absolute;
            top: 26rpx;
            display: flex;

            .resumeIcon {
                display: flex;
                margin: 20rpx 30rpx 0rpx 30rpx;

                image {
                    width: 60rpx;
                    height: 60rpx;
                }

                text {
                    display: block;
                    margin: 10rpx 0 0 20rpx;
                }
            }

            .signIcon {
                display: flex;
                margin: 20rpx 30rpx 0rpx 130rpx;

                image {
                    width: 70rpx;
                    height: 60rpx;
                }

                text {
                    display: block;
                    margin: 10rpx 0 0 20rpx;
                }
            }
        }

        .tabBar {
            margin-top: 20rpx;
            display: flex;
            flex-direction: column;
            text-align: center;
            .tabBg {
                image {
                    width: 400rpx;
                    height: 400rpx;
                }

                text {
                    font-size: 24rpx;

                }
            }

            .blank {
                width: 700rpx;
            }
        }

        .bm-data .info {
            margin-top: 20rpx;
            display: flex;
            flex-direction: column;
            width: 700rpx;
            height: 220rpx;
            background-color: #FFFFFF;
            padding: 20rpx;
        }

        .bm-data .top {
            margin: 12rpx 0px;
            display: flex;
            font-size: 36rpx;
            justify-content: space-between;
        }

        .bm-data .top .title text {
            font-size: 36rpx;
        }

        .bm-data .top .price {
            font-size: 40rpx;
            color: #258CFF;
        }

        .bm-data .top .price text {
            font-size: 40rpx;
        }

        .bm-data .info .tag {
            display: flex;
            flex-wrap: wrap;
        }

        .bm-data .info u-tag {
            margin-right: 10rpx;
            flex-direction: row;
        }

        .bm-data .info .company {
            display: flex;
            margin-top: 20rpx;
            justify-content: flex-start;
        }

        .bm-data .info image {
            width: 32rpx;
            height: 32rpx;
            margin-right: 10rpx;
        }
        .bottom {
            display: block;
            height: 10rpx;
            margin-bottom: 10rpx;
        }

    }
</style>
